<template>
  <div>
    <div class="con5 bg-white" style="height: 400px">
      <div class="container">
        <div class="row con9">
          <div class="col text-center">
            <img width="24" src="@/assets/con9-icon.png" alt="" />
            <span>成员高校</span>
          </div>
        </div>
        <div class="row con10">
          <div class="col text-center">Members of the university</div>
        </div>
        <div class="row p-0 con2">
          <div class="col text-center">
            <router-link tag="span" :to="{ name: 'school', params: { id: 0 } }">
              <img width="100" src="@/assets/bjhkhtdxlogo.png" alt="" />
            </router-link>
            <br />
            <div class="text-center">北京航空航天大学</div>
          </div>
          <div class="col text-center">
            <router-link tag="span" :to="{ name: 'school', params: { id: 3 } }">
              <img width="100" src="@/assets/bjydlogo.png" alt="" />
            </router-link>
            <br />
            <div class="text-center">北京邮电大学</div>
          </div>
          <div class="col text-center">
            <router-link tag="span" :to="{ name: 'school', params: { id: 1 } }">
              <img width="100" src="@/assets/bjsplogo.png" alt="" />
            </router-link>
            <br />
            <div class="text-center">北京师范大学</div>
          </div>
          <div class="col text-center">
            <router-link tag="span" :to="{ name: 'school', params: { id: 6 } }">
              <img width="100" src="@/assets/zycjlogo.png" alt="" />
            </router-link>
            <br />
            <div class="text-center">中央财经大学</div>
          </div>

          <div class="col text-center">
            <router-link tag="span" :to="{ name: 'school', params: { id: 5 } }">
              <img width="100" src="@/assets/kydxlogo.png" alt="" />
            </router-link>
            <br />
            <div class="text-center">中国矿业大学</div>
          </div>
          <div class="col text-center">
            <router-link tag="span" :to="{ name: 'school', params: { id: 4 } }">
              <img width="100" src="@/assets/wjyxylogo.png" alt="" />
            </router-link>
            <br />
            <div class="text-center">外交学院</div>
          </div>
          <div class="col text-center">
            <router-link tag="span" :to="{ name: 'school', params: { id: 2 } }">
              <img width="100" src="@/assets/bjxxkjdxlogo.jpg" alt="" />
            </router-link>
            <br />
            <div class="text-center">北京信息科技大学</div>
          </div>
        </div>
      </div>
    </div>
    <div class="container">
      <div class="row con1">
        <el-container>
          <el-main class="p-0 bg-white">
            <div class="width60 con1-icon-1">
              <div class="float-right f-12">
                <router-link tag="span" :to="{ name: 'news' }"
                  >MORE >></router-link
                >
              </div>
              <div class="float-none"></div>
            </div>
            <br />
            <el-container
              v-for="(v, i) in newlist1"
              :key="'a_' + i"
              class="text-list"
            >
              <el-aside width="80px" class="p-2">
                <div class="border text-center pl-2">
                  <div class="text-dark" style="font-size: 24px">
                    {{ 28 - i }}
                  </div>
                  <div class="text-muted">2021/5</div>
                </div>
              </el-aside>
              <el-main class="p-0">
                <router-link
                  tag="h5"
                  :to="{ name: 'newsinfo', params: { id: v.id } }"
                  class="text-truncate text-body m-0"
                  style="font-size: 20px; line-height: 36px"
                  v-text="v.title"
                >
                </router-link>
                <router-link
                  tag="span"
                  :to="{ name: 'newsinfo', params: { id: v.id } }"
                  class="text-truncate d-block text-black-50"
                  v-text="v.text"
                >
                </router-link>
              </el-main>
            </el-container>
            <!-- <el-container class="text-list">
              <el-aside width="80px" class="p-2">
                <div class="border text-center">
                  <div class="text-dark" style="font-size: 24px">28</div>
                  <div class="text-muted">2021/4</div>
                </div>
              </el-aside>
              <el-main class="p-0">
                <router-link
                  tag="h5"
                  :to="{ name: 'news' }"
                  class="text-truncate text-body m-0"
                  style="font-size: 20px; line-height: 36px"
                >
                  【资源共享课程专题系列】北师大“西方文学经典鉴赏”
                </router-link>
                <router-link
                  tag="span"
                  :to="{ name: 'news' }"
                  class="text-truncate d-block text-black-50"
                  >《西方文学经典鉴赏》是由北京师范大学开设的针对大学本科生开发的一门旨在提高人文素养水平的通识课程，是国家精品在线开放课程。2020年遴选成为首批沙河高教园区高校联盟资源共享课程，面向其他6所联盟成员高校本科生开放选课。
                </router-link>
              </el-main>
            </el-container>
            <el-container class="text-list">
              <el-aside width="80px" class="p-2">
                <div class="border text-center">
                  <div class="text-dark" style="font-size: 24px">10</div>
                  <div class="text-muted">2021/4</div>
                </div>
              </el-aside>
              <el-main class="p-0">
                <router-link
                  tag="h5"
                  :to="{ name: 'news' }"
                  class="text-truncate text-body m-0"
                  style="font-size: 20px; line-height: 36px"
                >
                  【资源共享课程专题系列】外交学院“国际人道法”
                </router-link>
                <router-link
                  tag="span"
                  :to="{ name: 'news' }"
                  class="text-truncate d-block text-black-50"
                  >《国际人道法》是由外交学院开设的优质课程。2020年遴选成为首批沙河高教园区高校联盟资源共享课程之一，面向园区内北京航空航天大学、北京师范大学、北京信息科技大学、北京邮电大学、中国矿业大学（北京）、中央财经大学6所高校本科学生开放选课。
                </router-link>
              </el-main>
            </el-container> -->
          </el-main>
          <el-aside width="400px" class="width400 bg-white">
            <div class="width60 con1-icon-2">
              <router-link
                tag="span"
                class="float-right f-12"
                :to="{ name: 'news' }"
                >MORE >></router-link
              >
              <div class="float-none"></div>
            </div>
            <br />
            <el-container
              v-for="(v, i) in newlist2"
              :key="'b_' + i"
              class="text-list-1 pr-4"
            >
              <el-aside width="30px">
                <div class="dian bg-primary rounded-circle"></div>
              </el-aside>
              <el-main class="p-0">
                <el-tooltip class="item" content="NEW" placement="top-start">
                  <div class="newtooltip" slot="content">
                    <newtooltip></newtooltip>
                  </div>
                  <router-link
                    tag="span"
                    :to="{ name: 'newsinfo', params: { id: v.id } }"
                    class="text-truncate d-block text-wrap h-100"
                    :class="v.title.length < 27 ? 'textalign' : ''"
                    v-text="v.title"
                  >
                  </router-link>
                </el-tooltip>
              </el-main>
            </el-container>
          </el-aside>
        </el-container>
      </div>
      <div class="row con11">
        <div class="col">
          <div class="con11-1">
            <div>
              <img src="@/assets/con11-icon.png" alt="" />
              <span>专项工作联盟</span>
            </div>
            <div class="con11-1-n text-uppercase">The child alliance</div>
          </div>
          <div class="row con11-2">
            <div class="col bor">
              <img src="@/assets/con11-icon1.png" alt="" />
              <span @click="gettomain" class="cin11-2-jx">教学工作联盟</span>
            </div>
            <div class="col bor">
              <img src="@/assets/con11-icon2.png" alt="" />学生活动工作联盟
            </div>
            <div class="col">
              <img src="@/assets/con11-icon3.png" alt="" />科研工作联盟
            </div>
          </div>
          <div class="row con11-2">
            <div class="col bor">
              <img src="@/assets/con11-icon4.png" alt="" />空间共享工作联盟
            </div>
            <div class="col bor">
              <img
                src="@/assets/con11-icon5.png"
                alt=""
              />大学生创新创业工作联盟
            </div>
            <div class="col">
              <img
                src="@/assets/con11-icon6.png"
                alt=""
              />国际型人才培养工作联盟
            </div>
          </div>
        </div>
      </div>
      <div class="row p-0 con1 con3">
        <el-container>
          <el-main class="p-0">
            <img class="yxkc" src="@/assets/con3icon.png" width="100%" alt="" />
          </el-main>
        </el-container>
      </div>
      <div class="row con4">
        <router-link
          tag="div"
          class="col position-relative cu"
          v-for="(v, k) in con4arr"
          :key="k"
          :to="{ name: '课程主页', params: { id: v.id } }"
        >
          <i
            class="el-icon-star-off position-absolute"
            style="right: 13px; top: 13px"
          ></i>
          <div class="con4-title">{{ v.title }}</div>
          <div class="con4-xf">
            <span class="con4-xf-y">学分:</span
            ><span class="con4-xf-x">{{ v.学分 }}</span>
            &nbsp;
            <span class="con4-xf-y">学时:</span
            ><span class="con4-xf-x">{{ v.学时 }}</span>
          </div>
          <div :title="v.context" class="con4-tc text-truncate">
            教师: {{ v.教师 }}
            <br />
            {{ v.context }}
          </div>
          <div class="con4-sh">
            {{ v.学校 }}
            <br />
            {{ v.授课 }}
          </div>
        </router-link>
      </div>
    </div>
  </div>
</template>
<script>
import newtooltip from "./newtooltip";
import li from "../data";
export default {
  props: ["setindex", "gettomain"],
  components: {
    newtooltip,
  },
  data() {
    return {
      newlist: li.newlist,
      index: 0,
      con3Button: "con3Button",
      con4arr: [
        {
          id: "1",
          课程编号: "U13M11142",
          title: "管理学原理",
          开课学院: "人文与经法学院",
          课程类型: "其他",
          学时: 32,
          学分: 2,
          总章节: 15,
          学校: "中国矿业大学",
          主要适用对象: "本科生",
          选修要求: "历史",
          授课: "线上课程",
          context: "10月14日-12月6日每周四晚上 （19:00-21:30）",
          选修人数: 0,
          教师: "赵国庆",
          当前学期选修人数: 160,
          info:
            "本课程最早源于2004年北京师范大学励耘实验班的“IT应用与思维拓展夏 令营”，2010年秋季学期作为北京市学院路教学共同体共享课（课程名称：思维 技能训练）面向学院路学区10余所高校本科生开课，2011、2012、2013、 2016、2018、2019、2020年春季学期作为研究生小学分课程（课程名称：思维 技能训练）面向北京师范大学教育学部研究生开课，2019年秋季学科作为研究 生基础课面向北京师范大学珠海校区科学教育专业研究生开课，2014, 2015年 春季学期作为全国教师教育网络联盟直播共享课（课程名称：思维训练与学习 力提升）面向北京师范大学、华中师范大学、华南师范大学、陕西师范大学、 西南大学、福建师范大学、东北师范大学等校师范生开课，2017年9月起，在 北京高校优质课程研究会平台每学期开课，选课人数累计两万余人",
        },
        {
          id: 2,
          课程编号: "U13M11144",
          title: "室内设计与赏析",
          开课学院: "人文与经法学院",
          课程类型: "其他",
          学时: 24,
          学分: 1.5,
          总章节: 15,
          主要适用对象: "本科生",
          学校: "北京航空航天大学",
          选修要求: "历史",
          选修人数: 0,
          教师: "李晓丹",
          授课: "线上课程",
          当前学期选修人数: 160,
          context: "10月14日-12月6日每周四晚上 （19:00-21:30）",

          info:
            "授课内容：共计 8 次课，每次 3 小时，内容包括 6 次讲座，1 次讨论课，1 次为考试课。每次讲座课又分为三部分：基础知识讲座、图片欣赏、录像播放，讲座时间根据每讲内容约为 1-2 小时左右。具体内容包括：第一讲：前言及购房基本知识包括购房定位、程序、委托设计程序及施工监理，房型选择等。第二讲：中小户型装修及案例（应用篇）第三讲：色彩与材料第四讲：采光与照明第五讲：家具与布置第六讲：空间与尺度讨论课内容：鼓励感兴趣、有精力的学生自由组队，利用图书馆、网络等资源选择自己喜欢的与室内环境作品相关的实例或自行设计作品（包括宿舍、自家住宅等），进行整理剖析并与大家分享。",
        },
        {
          id: 3,
          课程编号: "U13M11149",
          title: "证券投资学",
          开课学院: "经济管理类专业",
          课程类型: "其他",
          学时: 24,
          学分: 1.5,
          总章节: 15,
          学校: "沙河校区所有高校",
          主要适用对象: "本科生",
          选修要求: "历史",
          选修人数: 0,
          教师: "徐颖",
          授课: "线上课程",
          context: "10月14日-12月6日每周四晚上 （19:00-21:30）",

          当前学期选修人数: 160,
          info:
            "每学年为本科生主讲《金融学》、《证券投资学》、《互联网金融》、《保险学》等系列金融课程。课程教学秉承“教育的目的要适应由知识技能与价值观念双重驱动的社会发展”理念，注重知识传授与价值引领相统一，德智并重，点面结合，力求把思政教育蕴含在专业课程的知识传授中，把价值观培育和塑造融入课堂讲授，将教书育人的内涵落实到课堂教学当中。",
        },
        {
          id: 4,
          课程编号: "U13M11147",
          title: "C语言程序设计",
          开课学院: "公开课",
          课程类型: "其他",
          学时: 24,
          学分: 1.5,
          总章节: 15,
          学校: "沙河校区所有高校",
          主要适用对象: "本科生",
          选修要求: "历史",
          选修人数: 0,
          教师: "宋友",
          授课: "线上线下混合式",
          context: "每周二上午10:00-12:00",
          当前学期选修人数: 160,
          info:
            "1.面向新工科的精英学生培养实践条件和实践基地建设，“腾讯-教育部”教改项目，2019年通过验收2.北航学院大类专业程序设计课程群建设，校级（中央高校教改专项），2018年通过验收。3.互联网+交通信息创新创业人才培养平台建设，“腾讯-教育部”，2017年通过验收。4.算法分析与设计-双百工程优质课程A级，2018年获得认证。5.在《中国大学教学》杂志上发表程序设计教学研究论文两篇",
        },
      ],
    };
  },
  computed: {
    newlist1() {
      return this.newlist.slice(0, 3).map((v) => {
        const text = v.context.replace(/<\/?.+?\/?>/g, "");
        return {
          ...v,
          text,
        };
      });
    },
    newlist2() {
      return this.newlist.slice(3).map((v) => {
        const text = v.context.replace(/<\/?.+?\/?>/g, "");
        return {
          ...v,
          text,
        };
      });
    },
  },
};
</script>


<style scoped>
.cin11-2-jx {
  cursor: pointer;
}
.cin11-2-jx:hover {
  color: #fea341;
}
.con11 {
  height: 378px;
  background-color: rgb(7, 40, 66);
  color: #ffffff;
}
.con11 .con11-1 {
  height: 40px;
  margin-top: 35px;
  line-height: 24px;
}
.con11 .con11-1 img {
  width: 20px;
  margin-right: 14px;
}
.con11 .con11-1 span {
  font-size: 18px;
}
.con11-1-n {
  font-size: 12px;
  font-weight: 400;
  color: #d5d5d5;
  line-height: 30px;
}
.con11 .con11-2 {
  height: 30px;
  color: #ffffff;
  margin-top: 50px;
  margin-bottom: 80px;
}
.con11 .con11-2 div {
  padding-left: 60px;
  padding-right: 10px;
  font-size: 16px;
  font-weight: 400;

  line-height: 30px;
  height: 30px;
}
.con11 .con11-2 .bor {
  border-right: 2px solid #ffffff;
}

.con11 .con11-2 img {
  width: 28px;
  height: 28px;
  margin-right: 24px;
}
.btc {
  border: 1px solid #dfdfdf;
}
.con9 {
  font-size: 24px;
  font-weight: 400;
  color: #333333;
  padding-top: 45px;
}
.con9 img {
  display: inline-block;
  margin-right: 6px;
}
.con10 {
  font-size: 12px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #d5d5d5;
  margin-bottom: 40px;
}
.con2 {
  text-align: center;
}
.con2 img {
  display: inline-block;
  margin-bottom: 27px;
}
.con5 {
  text-align: center;
}
.con1-icon-1 {
  background-image: url(../assets/con1-icon-1.png);
  background-position-x: -20px;
  background-size: contain;
  background-repeat: no-repeat;
}
.con1-icon-2 {
  background-image: url(../assets/con1-icon-2.png);
  background-position-x: -20px;
  background-size: contain;
  background-repeat: no-repeat;
}
.con4 {
  margin-bottom: 100px;
}
.con4 .position-relative {
  height: 250px;
  background: #ffffff;
  box-shadow: 0px 11px 27px 0px rgba(200, 200, 200, 0.5);
  border-radius: 10px;
  padding: 0px;
  margin-left: 10px;
  margin-right: 10px;
}
.con4-title {
  font-size: 16px;
  font-weight: bold;
  color: #669df5;
  line-height: 30px;
  text-align: center;
  margin-top: 20px;
}
.con4-xf {
  padding-left: 50px;
  padding-right: 50px;
  text-align: center;
}
.con4-xf-x {
  width: 49px;
  height: 14px;
  font-size: 14px;
  font-weight: 400;
  color: #fea341;
  line-height: 30px;
  padding: 5px;
}
.con4-xf-y {
  width: 49px;
  height: 14px;
  font-size: 14px;
  font-weight: 400;
  color: #666666;
  line-height: 30px;
  padding: 5px;
}
.con4-tc {
  padding: 13px;
  font-size: 14px;
  font-weight: 400;
  color: #999999;
  line-height: 30px;
  max-width: 240px;
}
.con4-sh {
  font-size: 1rem;
  font-weight: 400;
  color: #999999;
  line-height: 30px;
  padding: 13px;
}
.text-list {
  padding: 8px;
  padding-right: 45px;
  height: 90px;
  cursor: pointer;
}
.text-list-1 {
  padding: 5px;
  height: 55px;
}
.dian {
  margin: 0 auto;
  width: 6px;
  height: 6px;
  margin-top: 22px;
}
.text-list-1 span {
  cursor: pointer;
}
.text-list-1 span:hover {
  color: var(--primary);
}
.cu {
  cursor: pointer;
}
.textalign {
  line-height: 47px;
}
</style>
